<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        用户组管理
    </title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <link href="css/main.css" media="all" rel="stylesheet">
</head>

<body>
<div class="x-body">
    <form action="" class="layui-form layui-form-pane" id="auth_groupadd" method="post">
        <input name="id" type="hidden" value=""/>
        <div class="layui-form-item">
            <label class="layui-form-label" for="name">
                <span class="x-red">*</span>用户组名称
            </label>
            <div class="layui-input-inline">
                <input class="layui-input" id="title" name="title"
                       type="text" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input checked="checked" name="status" title="启用" type="radio" value="1">
                <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                        class="layui-anim layui-icon layui-anim-scaleSpring"></i>
                    <div>启用</div>
                </div>
                <input checked="checked" name="status" title="禁用" type="radio" value="0">
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                    <div>禁用</div>
                </div>


            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">
                拥有权限
            </label>
            <table class="layui-table layui-input-block">
                <tbody>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            <input class="checkbox-parent" dataid="id-1" name="rules[]" type="checkbox" value="1">
                            <span style="color: red;font-weight: bold;">系统设置</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child" dataid="id-1-2"
                                                      name="rules[]" type="checkbox"
                                                      value="2">
                            <span>基础设置</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-2-3" name="rules[]"
                                                                        type="checkbox"
                                                                        value="3">
                            <span>基础设置操作</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child" dataid="id-1-9"
                                                      name="rules[]" type="checkbox"
                                                      value="9">
                            <span>友情链接</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-9-10" name="rules[]"
                                                                        type="checkbox"
                                                                        value="10">
                            <span>友情链接列表</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-9-11" name="rules[]"
                                                                        type="checkbox"
                                                                        value="11">
                            <span>友情链接添加修改</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-9-12" name="rules[]"
                                                                        type="checkbox"
                                                                        value="12">
                            <span>友情链接删除</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-9-13" name="rules[]"
                                                                        type="checkbox"
                                                                        value="13">
                            <span>友情链接审核</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-1-9-14" name="rules[]"
                                                                        type="checkbox"
                                                                        value="14">
                            <span>友情链接状态操作</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            <input class="checkbox-parent" dataid="id-4" name="rules[]" type="checkbox" value="4">
                            <span style="color: red;font-weight: bold;">管理员管理</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child" dataid="id-4-5"
                                                      name="rules[]" type="checkbox"
                                                      value="5">
                            <span>管理员列表</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-4-5-6" name="rules[]"
                                                                        type="checkbox"
                                                                        value="6">
                            <span>管理员添加修改</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-4-5-7" name="rules[]"
                                                                        type="checkbox"
                                                                        value="7">
                            <span>管理员删除</span>

                        </div>
                    </td>
                </tr>
                <tr>
                    <!--<td>
                        用户管理
                    </td>-->
                    <td>
                        <div class="layui-input-block">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="checkbox-parentcheckbox-child"
                                                                        dataid="id-4-5-8" name="rules[]"
                                                                        type="checkbox"
                                                                        value="8">
                            <span>管理员状态操作</span>

                        </div>
                    </td>
                </tr>
                <!--<tr>
<td>
文章管理
</td>
<td>
<div class="layui-input-block">
    <input name="id[]" type="checkbox" value="2"> 文章添加
    <input name="id[]" type="checkbox" value="2"> 文章删除
    <input name="id[]" type="checkbox" value="2"> 文章修改
    <input name="id[]" type="checkbox" value="2"> 文章改密
    <input name="id[]" type="checkbox" value="2"> 文章列表
</div>
</td>
</tr>-->
                </tbody>
            </table>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" for="desc">
                描述
            </label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="info" name="info" placeholder="请输入内容"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-filter="add" lay-submit="">保存</button>
        </div>
    </form>
</div>
<script charset="utf-8" src="lib/layui/layui.js">
</script>
<script charset="utf-8" src="js/x-layui.js">
</script>
<script charset="utf-8" src="js/jquery_002.js">
</script>
<script charset="utf-8" src="js/jquery.js">
</script>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form()
            , layer = layui.layer;

        //监听提交
        form.on('submit(add)', function (data) {
            var auth_groupadd = $("#auth_groupadd").serialize();
            var title = $("input[name='title']").val();
            //var data = data.field;
            if (title == "") {
                layer.msg("用户组名称不能为空", {icon: 5, time: 2000});
                return false;
            }
            $.ajax({
                type: "post",
                url: "xxxx",
                data: auth_groupadd,
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        layer.msg(data.info, {icon: 1, time: 1000});
                        setTimeout(function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }, 1000);
                        return false;
                    } else {
                        layer.msg(data.info, {icon: 5, time: 2000});
                        return false;
                    }
                }
            })
            return false;
        });


    });
</script>
<script>
    /* 权限配置 */
    $(function () {

        //动态选择框，上下级选中状态变化
        $('input.checkbox-parent').on('change', function () {
            alert("1");
            var dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + ']').prop('checked', $(this).is(':checked'));
        });
        $('input.checkbox-child').on('change', function () {
            var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
            var parent = $('input[dataid=' + dataid + ']');
            if ($(this).is(':checked')) {
                parent.prop('checked', true);
                //循环到顶级
                while (dataid.lastIndexOf("-") != 2) {
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    parent.prop('checked', true);
                }
            } else {
                //父级
                if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                    parent.prop('checked', false);
                    //循环到顶级
                    while (dataid.lastIndexOf("-") != 2) {
                        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                        parent = $('input[dataid=' + dataid + ']');
                        if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                            parent.prop('checked', false);
                        }
                    }
                }
            }
        });
    });
</script>

</body>

</html>